<!DOCTYPE html>

<head>
	<title>出刀记录</title>
	<meta name='viewport' content='width=480' charset="utf-8" />
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.0/index.js"></script>
	<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.0/theme-chalk/index.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="{{ url_for('yobot_static', filename='yocool/js/yocool.iii.js') }}"></script>
	<link rel="stylesheet" href="{{ url_for('yobot_static', filename='yocool/css/style.css') }}">

	<style>
	.el-table td,.el-table th {
		text-align: center;
    }
	
    .el-popover {
		white-space: pre-wrap;
    }
	
	.progress-btn {
	    width: 95px;
		height: 36px;
		padding: 10px 12px;
	}
	
	.pc-box {
		width: 1336px;
		margin: 0 auto;
	}
	
	.el-table{
		width: 1336px;
		margin: 0 auto;
	}
	
	.el-button+.el-button {
	    margin-left: 0px;
	}
	
	.el-col-24 {
	    width: 95%;
	    margin: 0px 2.5%;
	}
	
	.el-progress-bar__inner{
		background-color: var(--secondary-color-1);
	}
	
	
	
	.el-progress-bar__outer{
		background-color: #ffffff;
	}
	
	@media only screen and (max-width: 1080px) {
	
	.el-date-editor.el-input, .el-date-editor.el-input__inner {
	    width: 150px;
	}
	
	.damage-detail-box {
		display: inline-block;
		width: 130px;
	}
	
	.el-dialog {
	    width: 80%;
	}
	}
  </style>
</head>

<body>
	<div id="app">
		<div id="topToolbar">
			<el-page-header @back="location='..'" content=""></el-page-header>
			<div class="logo"><a class="url" href="http://175.24.70.191:9222/xcw/main/"></a></div>
			<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleTitleSelect">
				<el-menu-item index="5">我的</el-menu-item>
				<el-menu-item index="4">统计</el-menu-item>
				<el-menu-item index="3">查刀</el-menu-item>
				<el-menu-item index="2">预约</el-menu-item>
				<el-menu-item index="1">面板</el-menu-item>
			</el-menu>
		</div>
		<h1 style="text-align:center">出刀记录<el-popover placement="top" effect="light" trigger="hover">1.红名表示今日已使用过SL<br>2.有色背景表示已完成今日出刀<br>3.点击昵称或详细可以查看详细出刀情况<br>4.点击成员头像可以查看该成员的所有历史出刀记录<i
				 class="el-icon-question" slot="reference"></i></el-popover>
		</h1>
		<el-date-picker v-model="reportDate" type="date" placeholder="选择日期" @change="report_day"></el-date-picker>
		<el-button class="progress-btn" type="warning" @click="selectUnfinished">选中未完成</el-button>
		<el-button class="progress-btn" type="primary" @click="sendRemindVisible = true">提醒出刀</el-button>
		<el-dialog title="警告" :visible.sync="sendRemindVisible">
			<p>您确定要向[[ multipleSelection.length ]]名成员发送提醒吗</p>
			<el-form>
				<el-form-item label="提醒类型" label-width="120">
					<el-radio-group v-model="send_via_private">
						<el-switch v-model="send_via_private" active-text="私聊消息" inactive-text="群聊消息"></el-switch>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="sendRemindVisible = false">取消</el-button>
				<el-button type="danger" @click="sendRequest('send_remind'),sendRemindVisible = false">确定</el-button>
			</span>
		</el-dialog>
		<template v-if="progressData.length > 0">
			<el-button class="progress-btn" type="primary" @click="viewTails">尾刀一览</el-button>
			<el-row style="margin: 5px 0px 15px">
				<el-col style="display: flex; justify-content: space-between; margin-bottom: 5px;">
					<div>
						<p>成员[[ members.length ]]，已出[[ progressData.reduce((s,i)=>s+i.finished,0) ]]，剩余[[ members.length *
							3-progressData.reduce((s,i)=>s+i.finished,0) ]]</p>
					</div>
					<div>
						<p>[[ ((progressData.reduce((s,i)=>s+i.finished,0)/(members.length*3))*100).toFixed(1) ]]%</p>
					</div>
				</el-col>
				<el-col :span="24">
					<el-progress :percentage="(progressData.reduce((s,i)=>s+i.finished,0)/members.length/3*100).toFixed(1)" :show-text="false"
					 :stroke-width="16"></el-progress>
				</el-col>
			</el-row>
			<el-dialog title="未完成的尾刀一览" :visible.sync="tailsDataVisible">
				<template v-if="tailsData.length > 0">
					<el-table :data="tailsData">
						<el-table-column prop="qqid" label="QQ号" width="120" sortable></el-table-column>
						<el-table-column prop="nickname" label="昵称" width="200" sortable></el-table-column>
						<el-table-column prop="boss" label="boss" width="80"></el-table-column>
						<el-table-column prop="damage" label="尾刀伤害" width="120" sortable>
							<template slot-scope="scope">[[ scope.row.damage.toLocaleString() ]]</template>
						</el-table-column>
						<el-table-column prop="message" label="留言"></el-table-column>
					</el-table>
				</template>
				<template v-else>
					没有尾刀
				</template>
			</el-dialog>
			<el-table width="100%" v-if="isMobile" :data="progressData" :span-method="arraySpanMethod" ref="multipleTable"
			 @selection-change="handleSelectionChange" stripe :row-class-name="getRowClass" @cell-click="clickCell">
				<el-table-column type="selection" width="70"></el-table-column>
				<el-table-column label="成员" width="80">
					<template slot-scope="scope">
						<el-avatar shape="square" :src="'https://q1.qlogo.cn/g?b=qq&nk=' + scope.row.qqid + '&s=140'" @click.native="location='../'+scope.row.qqid+'/'"></el-avatar>
					</template>
				</el-table-column>
				<el-table-column label="昵称" width="200">
					<template slot-scope="scope">
						<span :style="{color: scope.row.sl == today ? '#ff0000' : 'var(--font-color)'}">[[ scope.row.nickname ]]</span>
					</template>
				</el-table-column>
				<el-table-column prop="finished" label="今日" width="80" sortable></el-table-column>
				<el-table-column label="显示详细" type="expand" align="right">
					<template slot-scope="props">
						<div>
							第一刀:
							<div class="damage-detail-box">
								<template v-if="props.row.detail[0]">
									<a v-html="csummary(props.row.detail[0])"></a>
									<el-popover placement="top" effect="light" trigger="hover">[[ cdetail(props.row.detail[0]) ]]<i class="el-icon-info"
										 slot="reference"></i></el-popover>
								</template>
								<template v-else>
									尚未出刀
								</template>
							</div>
							<i :style="{ visibility: props.row.detail[1] ? 'visible' : 'hidden' }" class='el-icon-plus'></i>
							<div class="damage-detail-box">
								<template v-if="props.row.detail[1]">
									<a v-html="csummary(props.row.detail[1])"></a>
									<el-popover placement="top" effect="light" trigger="hover">[[ cdetail(props.row.detail[1]) ]]<i class="el-icon-info"
										 slot="reference"></i></el-popover>
								</template>
								<template v-else-if="props.row.detail[0] && !props.row.detail[0].health_ramain ">
									剩余补偿刀未出
								</template>
								<template></template>
							</div>
						</div>
						<div>
							第二刀:
							<div class="damage-detail-box">
								<template v-if="props.row.detail[2]">
									<a v-html="csummary(props.row.detail[2])"></a>
									<el-popover placement="top" effect="light" trigger="hover">[[ cdetail(props.row.detail[2]) ]]<i class="el-icon-info"
										 slot="reference"></i></el-popover>
								</template>
								<template v-else>
									尚未出刀
								</template>
							</div>
							<i :style="{ visibility: props.row.detail[3] ? 'visible' : 'hidden' }" class='el-icon-plus'></i>
							<div class="damage-detail-box">
								<template v-if="props.row.detail[3]">
									<a v-html="csummary(props.row.detail[3])"></a>
									<el-popover placement="top" effect="light" trigger="hover">[[ cdetail(props.row.detail[3]) ]]<i class="el-icon-info"
										 slot="reference"></i></el-popover>
								</template>
								<template v-else-if="props.row.detail[2] && !props.row.detail[2].health_ramain ">
									剩余补偿刀未出
								</template>
							</div>
						</div>
						<div>
							第三刀:
							<div class="damage-detail-box">
								<template v-if="props.row.detail[4]">
									<a v-html="csummary(props.row.detail[4])"></a>
									<el-popover placement="top" effect="light" trigger="hover">[[ cdetail(props.row.detail[4]) ]]<i class="el-icon-info"
										 slot="reference"></i></el-popover>
								</template>
								<template v-else>
									尚未出刀
								</template>
							</div>
							<i :style="{ visibility: props.row.detail[5] ? 'visible' : 'hidden' }" class='el-icon-plus'></i>
							<div class="damage-detail-box">
								<template v-if="props.row.detail[5]">
									<a v-html="csummary(props.row.detail[5])"></a>
									<el-popover placement="top" effect="light" trigger="hover">[[ cdetail(props.row.detail[5]) ]]<i class="el-icon-info"
										 slot="reference"></i></el-popover>
								</template>
								<template v-else-if="props.row.detail[4] && !props.row.detail[4].health_ramain ">
									剩余补偿刀未出
								</template>
							</div>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<div v-else class="pc-box">
				<el-table width="100%" :data="progressData" :span-method="arraySpanMethod" ref="multipleTable" @selection-change="handleSelectionChange"
				 stripe :row-class-name="getRowClass" size="medium">

					<el-table-column prop="sl" label="SL" width="75" sortable>
						<template slot-scope="scope">
							<template v-if="today==-1">
								<i class="el-icon-folder-remove"></i>
							</template>
							<template v-else>
								<i v-if="scope.row.sl==today" class="el-icon-star-off" style="color: #F56C6C"></i>
								<i v-else class="el-icon-star-on" style="color: #67C23A"></i>
							</template>
						</template>
					</el-table-column>
					<el-table-column label="成员" width="60">
						<template slot-scope="scope">
							<el-avatar shape="square" :src="'https://q1.qlogo.cn/g?b=qq&nk=' + scope.row.qqid + '&s=140'" @click.native="location='../'+scope.row.qqid+'/'"></el-avatar>
						</template>
					</el-table-column>
					<el-table-column label="昵称" width="180" prop="nickname" sortable>
					</el-table-column>
					<el-table-column prop="finished" label="今日" width="60" sortable></el-table-column>
					<el-table-column label="第一刀">
						<el-table-column label="尾刀" width="150">
							<template v-if="scope.row.detail[0]" slot-scope="scope">
								<a v-html="csummary(scope.row.detail[0])"></a>
								<el-popover placement="top" effect="light" trigger="hover">[[ cdetail(scope.row.detail[0]) ]]<i class="el-icon-info"
									 slot="reference"></i></el-popover>
							</template>
						</el-table-column>
						<el-table-column label="剩余刀" width="150">
							<template v-if="scope.row.detail[1]" slot-scope="scope">
								<a v-html="csummary(scope.row.detail[1])"></a>
								<el-popover placement="top" effect="light" trigger="hover">[[ cdetail(scope.row.detail[1]) ]]<i class="el-icon-info"
									 slot="reference"></i></el-popover>
							</template>
						</el-table-column>
					</el-table-column>
					<el-table-column label="第二刀">
						<el-table-column label="尾刀" width="150">
							<template v-if="scope.row.detail[2]" slot-scope="scope">
								<a v-html="csummary(scope.row.detail[2])"></a>
								<el-popover placement="top" effect="light" trigger="hover">[[ cdetail(scope.row.detail[2]) ]]<i class="el-icon-info"
									 slot="reference"></i></el-popover>
							</template>
						</el-table-column>
						<el-table-column label="剩余刀" width="150">
							<template v-if="scope.row.detail[3]" slot-scope="scope">
								<a v-html="csummary(scope.row.detail[3])"></a>
								<el-popover placement="top" effect="light" trigger="hover">[[ cdetail(scope.row.detail[3]) ]]<i class="el-icon-info"
									 slot="reference"></i></el-popover>
							</template>
						</el-table-column>
					</el-table-column>
					<el-table-column label="第三刀">
						<el-table-column label="尾刀" width="150">
							<template v-if="scope.row.detail[4]" slot-scope="scope">
								<a v-html="csummary(scope.row.detail[4])"></a>
								<el-popover placement="top" effect="light" trigger="hover">[[ cdetail(scope.row.detail[4]) ]]<i class="el-icon-info"
									 slot="reference"></i></el-popover>
							</template>
						</el-table-column>
						<el-table-column label="剩余刀" width="150">
							<template v-if="scope.row.detail[5]" slot-scope="scope">
								<a v-html="csummary(scope.row.detail[5])"></a>
								<el-popover placement="top" effect="light" trigger="hover">[[ cdetail(scope.row.detail[5]) ]]<i class="el-icon-info"
									 slot="reference"></i></el-popover>
							</template>
						</el-table-column>
					</el-table-column>
					<el-table-column type="selection" width="60"></el-table-column>
				</el-table>
				<el-button class="progress-btn" @click="viewInExcel" size="mini" style="margin: 10px auto 0px;width: 100px;height: 28px;padding: 8px 10px;position: absolute;">在Excel中查看</el-button>
			</div>
			<el-button class="progress-btn" @click="dropMemberVisible = true" style="width: 40px;right: 10px;margin: 5px 0px 25px;position: absolute;"><i
				 class="el-icon-delete"></i></el-button>
			<el-dialog title="警告" :visible.sync="dropMemberVisible">
				<p>您确定要删除这[[ multipleSelection.length ]]名成员吗</p>
				<span slot="footer" class="dialog-footer">
					<el-button type="primary" @click="dropMemberVisible = false">取消</el-button>
					<el-button type="danger" @click="sendRequest('drop_member'),dropMemberVisible = false">确定</el-button>
				</span>
			</el-dialog>
		</template>
		<template v-else>
			没有记录
		</template>
	</div>
</body>
<script>
	var csrf_token = "{{ session['csrf_token'] }}";
</script>
<script src="{{ url_for('yobot_static', filename='clan/progress.js') }}"></script>

</html>
